<template>
  <div class="checkSelect">
    <span>寺庙选择</span>
    <el-select
      v-model="checkedValue"
      default-first-option
      placeholder="Search"
      class="header-search-select"
      @change="checkTemple"  >
      <el-option v-for="(item,index) in options" :key="index" :value="item.id" :label="item.name" />
    </el-select>
  </div>
</template>

<script>
import { templeList } from "../api/temple";
export default {
  name: "TempleCheck",
  data() {
    return {
      checkedValue: 0,
      options: [
        {
          id: 0,
          name: "全部"
        }
      ]
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getTempleList();
  },
  methods: {
    checkTemple(e) {
      this.$emit("getTemple", e);
    },
    async getTempleList() {
      let resp = await templeList();
      if (resp != null && resp.code == 0 && resp.data != null) {
        this.options = this.options.concat(resp.data.templeList);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.checkSelect {
  margin: 15px;
  span {
    float: left;
    display: block;
    font-size: 16px;
    color: #999;
    margin: 5px 10px 0 0;
  }
}
</style>
